<!-- 前台店长 – 首页 – 会员考勤 – 2			attendance -->
<template>
	<view class="">
		<view class="punch-top">
			<view class="w90 f b c p_t_20">
				<view class="vw45 f b">
					<image style="width: 96rpx;height: 96rpx;border-radius: 200rpx;" :src="data.img" mode=""></image>
					<view class="f d">
						<view class="vw20 f b c">
							<text class="fs28 bold">{{data.name}}</text>
							<text class="fs28 bold">{{data.sex}}</text>
						</view>
						<view class="p_t_20">
							<text class="fs28">{{data.phone}}</text>
						</view>
					</view>
				</view>	
				<!-- 雷达图 -->
				<!-- <view class="vw15 f d c">
					<image style="width:36rpx;height:36rpx;" src="../../../../static/img/066.png" mode=""></image>
					<text class="fs16 p_t_10">考勤统计</text>
				</view> -->
			</view>
		</view>
		<view class="w90s" style="position:relative;">
			<view class="Members-biaoges lan senter"  @click="dateOpen('hopeBeginTime', hopeBeginTime)">
				<text class="bold fs28">{{time}}年上课次数(月/次)</text>
			</view>
			<!-- <view>
				<wyb-table ref="table" :headers="headers" :contents="contents" header-bg-color="#BFDBF1" first-col-bg-color="#fff" width="680rpx" height="150rpx"/>
			</view>
			<view>
				<wyb-table ref="table" :headers="headersa" :contents="contentsa" header-bg-color="#BFDBF1" first-col-bg-color="#fff" width="680rpx" height="150rpx"/>
			</view> -->
			<view class=" dis-flex flex-wrap ">
				<view class="wd25" v-for="(item,index) in list" :key="index">
					<view class="center":class="{'mt15':index>3}" style="height: 80rpx;line-height: 80rpx;border: 2rpx solid #f3f3f3;background: #BFDBF1;">
						{{index+1}}月
					</view>
					<view class="center " style="height: 80rpx;line-height: 80rpx;border: 2rpx solid #f3f3f3; background-color: rgba(191,219,241,.2);">
						{{item}}
					</view>
				</view>
			</view>
			
		</view>
		<my-datetime ref="dateTimePop" @ok="timeOk" :shownum="1" :timeStr="time"></my-datetime>
	</view>
</template>

<script>
	import myDatetime from '@/components/my-datetime/my-datetime'
	export default {
		components: {
			'my-datetime': myDatetime
		},
		data() {
			return {
				time:'',
				hopeBeginTime: '',
				dateKey: '',
				data:"",
				list:[]
            }
		},
		onLoad(e) {
			this.data = JSON.parse(decodeURIComponent(e.data));
			this.time = e.time.split('-')[0]
			this.init()
		},
		methods: {
			init(){
				var that = this
				var json = {
					uid: that.data.id,
					date:that.time
				}
				that.$http.post(that.$config.UrlPostuserKaoqinInfo, json).then((res) => {
					if (res.status == 1) {
						that.list = res.data.month
					}
				})
			},
			// 开启弹窗
			dateOpen (key, date) {
				this.dateKey = key
				this.$refs.dateTimePop.open(date || '');
			},
			// 关闭弹窗
			timeOk (str, obj) {
				this[this.dateKey] = str || ''
				this.time = str
				this.init()
			}
		}
	}
</script>

<style scoped>

	.punch-top{
		height: 144rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
		margin:0 auto;
		margin-top:24rpx;
	}
	.Members-biaoges{
		height:88rpx;
		line-height:88rpx;
		border: 2rpx solid #f3f3f3;
		font-size:16rpx;
		margin:0 auto;
		margin-top:20rpx;
	}
	.lan{
		background:#BFDBF1;
	}
	.teaching-lan{
		width:188rpx;
		height:318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position:absolute;
		top:70rpx;
		left:490rpx;
		z-index: 99;
	}
</style>
